<template>
  <div class="card-box g_pointer">
    <img class="card" :src="cardInfo.imgUrl" />
    <div class="title">{{ cardInfo.text }}</div>
    <div class="btn">{{ cardInfo.btnText }}</div>
  </div>
</template>

<script>
export default {
  props: ["cardInfo"],
};
</script>

<style lang="less" scoped>
.card-box {
  position: relative;
  overflow: hidden;
}
.card-box:hover {
  img {
    scale: 1.1;
  }
}
img {
  transition: scale 0.5s;
}
.card {
  width: 285px;
  height: 168px;
}
.title,
.btn {
  position: absolute;
  left: 20px;
}
.title {
  height: 29px;
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
  top: 43px;
}
.btn {
  width: 96px;
  height: 27px;
  border: 1px solid #ffffff;
  font-size: 16px;
  font-weight: 300;
  color: #ffffff;
  line-height: 27px;
  top: 91px;
}
</style>